<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论</title>
</head>

<body>
    <button id="getComment">获取评论</button>
    <button id="add-comment">添加评论</button>
    <br />
    <br />
    <div>
        <textarea name="comment-content" id="comment-content" cols="30" rows="10"></textarea>
    </div>
    <h2>评论</h2>
    <ul id="comment"></ul>

    <script src="ajax.js"></script>
    <script>
        const oBtnGetComment = document.getElementById('getComment');
        const oComment = document.getElementById('comment');
        const aLink = document.getElementsByClassName('link');
        const oBtnAddComment = document.getElementById('add-comment');
        const oContent = document.getElementById('comment-content');

        const HOST = 'http://127.0.0.1:8888';
        const artical = '5a30a4dfcd9b851154d4b77c';
        const api = {
            add: HOST + '/comment/add',
            list: HOST + '/comment/list'
        };
        let commentTo = '';

        getComment();

        oBtnGetComment.addEventListener('click', function () {
            getComment();
        }, false);

        oBtnAddComment.addEventListener('click', function () {
            if (!/\S/.test(oContent.value)) {
                alert('评论不能为空');
            }
            addComment();
        }, false);

        document.addEventListener('click', function (ev) {
            const target = ev || event;
            const targetId = target.srcElement.dataset.id;
            if (targetId) {
                commentTo = targetId;
                console.log(targetId);
            }
        }, false);

        function addComment() {
            ajax.post(api.add, {
                    artical: artical,
                    content: oContent.value,
                    commentTo: commentTo
                })
                .then((res) => {
                    console.log(res);
                    if (res.code === '0000') {
                        alert('添加评论成功');
                        oContent.value = '';
                        getComment();
                    } else {
                        alert(res.msg);
                    }
                })
                .catch(() => {
                    console.log('失败');
                });
        }

        function getComment() {
            ajax.get(api.list, {
                    artical: artical,
                    pageSize: 10,
                    pageNo: 1
                })
                .then((res) => {
                    console.log(res);
                    if (!res.data || !res.data.data.length) {
                        console.log('无数据');
                        return;
                    }
                    let sCommentList = '';
                    const aComment = res.data.data;
                    for (let i = 0; i < aComment.length; i++) {
                        let commentTo = aComment[i].to;
                        let sCommentTo = '';
                        if (commentTo) {
                            sCommentTo =
                                `
                                <a data-id="${aComment[i].from._id}" href="javascript:;">${aComment[i].from.username}</a> 给
                                <a data-id="${aComment[i].to._id}" href="javascript:;">${aComment[i].to.username}</a> 的评论
                            `;
                        } else {
                            sCommentTo =
                                `
                                来自 <a data-id="${aComment[i].from._id}" href="javascript:;">${aComment[i].from.username}</a> 的评论：
                            `;
                        }
                        sCommentList +=
                            `
                            <li>
                                <span>
                                    ${sCommentTo}
                                    <span>${aComment[i].content}</span>
                                </span>
                            </li>
                        `;
                    }
                    oComment.innerHTML = sCommentList;
                })
                .catch(() => {
                    console.log('失败');
                });
        }
    </script>
</body>

</html>